{%extends 'layout.admin.html'%}
{%block content%}
{% load authfilters %}


<style type='text/css'>
.avatar {
    width: 12rem;
    height: 4.5rem;
    white-space: nowrap;
    font-size: 1rem;
}

{%for r in items%}
@font-face {
    font-family: '{{r.code}}';
    src: url('/dist/fonts/{{r.ttf}}'),

}
{%endfor%}
</style>

<div class="page-body">
    <div class="container-xl">
        {%include 'header.html'%}

        <form class="card" method="get" name="search-form" id="search-form" action="#search-form">
            <div class="card-body">
                <div class="row">
                    <div class="mb-3 col-sm-4 col-md-2">
                        <label class="form-label">Preview:</label>
                        <input type="text" class="form-control" placeholder="Type your text here" name="txt" value="{{filters.txt}}">
                    </div>

                    <div class="mb-3 col-sm-4 col-md-2">
                        <label class="form-label">License Type:</label>
                        <select name="license" class="form-select">
                            <option value="">- Select License Type -</option>
                            {%for k, v in licenseConf.items%}
                            <option value="{{k}}" {%ifequal filters.license k%}selected{%endifequal%}>{{v}}</option>
                            {%endfor%}
                        </select>
                    </div>
 
                    <div class="mb-3 col-sm-4 col-md-8">
                        <label class="form-label">Color:</label>
                        <input type="color" class="form-control form-control-color" name="color" value="{{filters.color}}">
                        <input type="hidden" name="k" value="{{filters.keyword}}">
                        <div style="margin-top:-2.5rem; margin-left: 4.5rem;">
                            <button type="submit" class="btn btn-6 btn-outline-primary">Submit</button>
                            <a href="/" class="btn btn-6 btn-outline-secondary">Reset</a>
                        </div>
                    </div>
                 </div>
            </div>
        </form>


        <div class="row row-cards">
            <div class="space-y">
                {%for r in items%}
                <div class="card">
                    <div class="row g-0">
                        <div class="col-auto">
                            <div class="card-body">
                                <div class="avatar avatar-md"><span style="font-family: '{{r.code}}'; color: {{filters.color}};" class="font-demo">{%if filters.txt%}{{filters.txt}}{%else%}{{r.name}}{%endif%} </span></div>
                            </div>
                        </div>
                    
                        <div class="col">
                            <div class="card-body ps-0">
                                <div class="row">
                                    <div class="col">
                                        <h3 class="mb-0">
                                            <a href="{{host}}/{{r.code}}.html">{{r.name}}</a> - 
                                            {{r.designer}}
                                        </h3>
                                    </div>

                                    {%if r.commercialLicense%}
                                    <div class="col-auto fs-3 text-green">
                                        <a href="{{r.commercialLicense}}" target="_blank" class="text-green">Commercial License</a>
                                    </div>
                                    {%endif%}

                                </div>

                                <div class="row">
                                    <div class="col-md">
                                        <div class="mt-3 list-inline list-inline-dots mb-0 text-secondary d-sm-block d-none">
                                            <div class="list-inline-item">{{r.license|getMap:licenseConf}}</div>
                                            <div class="list-inline-item">
                                                <a href="{{host}}/download/{{r.code}}" target="_blank">
                                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-2"><path d="M19 18a3.5 3.5 0 0 0 0 -7h-1a5 4.5 0 0 0 -11 -2a4.6 4.4 0 0 0 -2.1 8.4"></path><path d="M12 13l0 9"></path><path d="M9 19l3 3l3 -3"></path></svg>
                                                Download
                                                </a>
                                            </div>
                                       </div>

                                    </div>

                                    <div class="col-md-auto">
                                        <div class="mt-3 badges">
                                            {%for c in r.cates%}
											<a href="{{host}}/fonts/0-{{c}}-1" class="badge badge-outline text-secondary fw-normal badge-pill">{{c|getMap:cateMap}}</a>
                                            {%endfor%}
										</div>

                                    </div>

                                </div>
                            </div>
                        </div>

                    </div>
                </div>
                {%endfor%}

                {% include 'page.html' %}

            </div>
        

        </div>

    </div>

</div>


<script type='text/javascript'>
    $(document).ready(function() {
        window.setTimeout(function() {
            $('.font-demo').each(function() {
                var $p = $(this).parent();
                var w = Math.min(1.0 * $p.height() / $(this).height(), 1.0 * $p.width() / $(this).width());
                $(this).css('font-size', w * 0.9 + 'rem');
            });
        }, 500);
    });

</script>

{%endblock%}


